<template>
  <view class="lang-switch">
    <view class="select-view" :class="[locale === 'ug-CN' ? 'right' : 'left']"/>
    <view :style="{ color: locale === 'ug-CN' ? '' : 'white' }" class="item" @click="changeLang('zh-CN')">汉</view>

    <view :style="{ color: locale === 'ug-CN' ? 'white' : '',paddingBottom: '4rpx' }" class="item ug-CN"
          @click="changeLang('ug-CN')">ئۇ
    </view>
  </view>
</template>

<script lang="js">
import Vue from 'vue';

export default Vue.extend({
  emits: ['change'],
  methods: {
    changeLang(lang) {
      this.$store.dispatch('setLang', lang);
      this.$emit('change')
    }
  }
});
</script>

<style lang="scss" scoped>
.lang-switch {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12rpx;
  display: flex;
  padding: 6rpx 0;
  width: 160rpx;
  align-items: center;
  position: relative;

  .item {
    flex: 1;
    text-align: center;
    z-index: 1;
    font-size: 30rpx;
  }

  .select-view {
    position: absolute;
    top: 4rpx;
    bottom: 4rpx;
    width: 80rpx;
    background-color: $uni-color-primary;
    border-radius: 6rpx;
  }

  .left {
    left: 4rpx;
  }

  .right {
    right: 4rpx;
  }
}
</style>